<template>
	<view class="home">
		<view class="head">
			<image src="../../static/icons/search.png"></image>
			<image src="../../static/icons/cart.png" mode=""></image>
		</view>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper class="swiper square-dot" indicator-dots autoplay circular>
				<swiper-item class="swiper-item" v-for="(item, index) in banners" :key="index"><image :src="item.pic" mode=""></image></swiper-item>
			</swiper>
		</view>
		<!-- 分类 -->
		<view class="category">
			<navigator class="category-item" v-for="item in categoryList" :key="item.id" :url="`../kind/kindlist/list?id=${item.id}`">
				<image :src="item.icon" mode=""></image>
				<view class="category-name">{{ item.name }}</view>
			</navigator>
		</view>
		<!-- 通知 -->
		<view class="notify">
			<image src="../../static/icons/notify.png" mode=""></image>
			<text class="title">限时活动:</text>
			<swiper autoplay circular vertical interval="2000" disable-touch class="notify-swiper">
				<swiper-item v-for="item in recommendList" :key="item.recommendId">
					<view class="swiper-item">
						<view class="left">{{ item.name }}</view>
						<view class="right">
							<view class="price">{{ item.price || 0 }}元</view>
							<view class="promotionPrice">现价: {{ item.promotionPrice || 0 }}元</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 热门推荐 -->
		<view class="hot">
			<view class="title">热门推荐</view>
			<swiper class="hot-swiper" autoplay circular interval="1000" duration="3000">
				<swiper-item class="swiper-item" v-for="item in hotLists" :key="item.id">
					<navigator :url="`../kind/productDetail/productDetail?id=${item.id}`">
						<image :src="item.pic" mode=""></image>
						<view class="name">{{ item.name }}</view>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<!-- 新品推荐 -->
		<view class="new">
			<view class="title">新品推荐</view>
			<scroll-view class="new-scrollview" :scroll-x="true" :enable-flex="true">
				<navigator class="scroll-item" v-for="item in newList" :key="item.id" :url="`../kind/productDetail/productDetail?id=${item.id}`">
					<view class="item-content">
						<image :src="item.pic" mode=""></image>
						<view class="info">
							<view class="name">{{ item.name }}</view>
							<view class="price">价格: {{ item.price || 0 }} 元</view>
						</view>
					</view>
				</navigator>
			</scroll-view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="products">
			<view class="title">猜你喜欢</view>
			<view class="list">
				<navigator class="list-item" v-for="item in saleMostProductsList" :key="item.id" :url="`../kind/productDetail/productDetail?id=${item.id}`">
					<image :src="item.pic" mode=""></image>
					<view class="info">
						<view class="brand">{{ item.name }}</view>
						<view class="other">
							<text class="price">￥{{ item.price || 0 }}元</text>
							<text class="categoryName">{{ item.brandName }}</text>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import { bannerAds, findCategory, recommendList, hotList, lejuLatestProducts, saleMostProducts } from '@/api/home/index.js';
export default {
	data() {
		return {
			// 轮播图默认数据
			defaultBanners: ['../../static/icons/3.jpeg', '../../static/icons/4.jpeg'],
			banners: [], // 轮播图
			categoryList: [], // 分类
			recommendList: [], // 限时活动
			hotLists: [], // 热门推荐
			newList: [], // 新品推荐
			saleMostProductsList: [] // 猜你喜欢
		};
	},
	methods: {
		async init() {
			// 获取banners
			const bannerResp = await bannerAds();
			this.banners = bannerResp.data.items;
			// 获取分类
			const categoryResp = await findCategory();
			this.categoryList = categoryResp.data.category.children;
			// 获取限时活动
			const recommendListReps = await recommendList();
			this.recommendList = recommendListReps.data.items;
			// 获取热门推荐
			const hotListResp = await hotList();
			this.hotLists = hotListResp.data.items;
			// 获取新品推荐
			const newListResp = await lejuLatestProducts();
			this.newList = newListResp.data.productList;
			// 获取猜你喜欢
			const saleMostProductsReps = await saleMostProducts();
			this.saleMostProductsList = saleMostProductsReps.data.items;
		}
	},
	onLoad() {
		this.init();
	}
};
</script>

<style lang="scss" scoped>
.home {
	// 头部搜索和购物车
	.head {
		display: flex;
		justify-content: flex-end;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		z-index: 1000;
		image {
			width: 42rpx;
			height: 42rpx;
			&:last-child {
				margin-left: 46rpx;
			}
		}
	}
	// 轮播图
	.banner {
		.swiper {
			height: 362rpx;
			&-item {
				image {
					width: 100%;
					height: 100%;
					border-radius: 0 0 24rpx 24rpx;
				}
			}
			// 修改uniapp组件的样式需使用/deep/
			/deep/ .uni-swiper-dot {
				background-color: #d8d8d8;
				opacity: 0.5;
			}
			/deep/ .uni-swiper-dot.uni-swiper-dot-active {
				opacity: 1;
			}
		}
	}
	// 分类
	.category {
		display: flex;
		justify-content: space-around;
		margin: 60rpx 0;
		.category-item {
			image {
				border-radius: 8rpx;
				width: 80rpx;
				height: 80rpx;
			}
			.category-name {
				font-size: 32rpx;
				color: #333;
				text-align: center;
			}
		}
	}
	// 限时活动
	.notify {
		display: flex;
		align-items: center;
		height: 96rpx;
		margin: 40rpx;
		background-color: #fff;
		overflow: hidden;
		image {
			width: 48rpx;
			height: 48rpx;
			margin: 0 10rpx 0 30rpx;
			animation: notify 1s infinite;
		}
		.title {
			color: orange;
			font-size: 28rpx;
			font-weight: 600;
		}
		&-swiper {
			flex: 1;
			height: 100%;
			.swiper-item {
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 30rpx 0 20rpx;
				.left {
					width: 250rpx;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.price {
					text-decoration: line-through;
					font-size: 24rpx;
					font-weight: 600;
				}

				.promotionPrice {
					font-size: 24rpx;
					color: #f00;
					font-weight: 600;
				}
			}
		}
	}
	// 热门推荐
	.hot {
		padding: 0 30rpx;
		.title {
			font-size: 32rpx;
			color: #3e3e3e;
			padding: 30rpx 0;
			letter-spacing: 2rpx;
			font-weight: 600;
		}
		&-swiper {
			height: 300rpx;
			.swiper-item {
				width: 208rpx !important;
				padding: 0 20rpx;
				image {
					width: 100%;
					height: 176rpx;
				}
				.name {
					width: 100%;
					text-align: center;
					font-size: 26rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-top: 20rpx;
				}
			}
		}
	}
	// 新品推荐
	.new {
		padding: 0 30rpx;
		.title {
			font-size: 32rpx;
			color: #3e3e3e;
			padding: 30rpx 0;
			letter-spacing: 2rpx;
			font-weight: 600;
		}
		&-scrollview {
			display: flex;
			flex-wrap: nowrap;
			white-space: nowrap;
			height: 260rpx;
			.scroll-item {
				display: inline-block;
				width: 590rpx;
				height: 100%;
				background: #fff;
				border-radius: 20rpx;
				margin-right: 30rpx;
				.item-content {
					height: 100%;
					display: flex;
					padding: 0 30rpx;
					align-items: center;
					image {
						width: 204rpx;
						height: 168rpx;
					}
					.info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 100%;
						font-size: 26rpx;
						color: #3e3e3e;
						box-sizing: border-box;
						padding: 40rpx 0 46rpx 40rpx;
						.name {
							width: 95%;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: normal;
						}
					}
				}
			}
		}
	}
	// 猜你喜欢
	.products {
		padding: 0 30rpx;
		.title {
			font-size: 32rpx;
			color: #3e3e3e;
			padding: 30rpx 0;
			letter-spacing: 2rpx;
			font-weight: 600;
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			&-item {
				width: 324rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				image {
					width: 100%;
					height: 238rpx;
				}
				.info {
					padding: 36rpx;
					font-size: 26rpx;
					.brand {
						margin: 20rpx 0;
						box-sizing: border-box;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: normal;
						font-weight: 700;
					}
					.other {
						display: flex;
						justify-content: space-between;
						.price {
							max-width: 40%;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
}
@keyframes notify {
	from {
		opacity: 0.5;
	}
	to {
		opacity: 1;
	}
}
</style>
